<template>
    <page-main class="word-preview">
        <el-row :gutter="20" type="flex" align="middle">
            <el-col :md="8">
                <button-panel icon="ri-file-download-line" title="下载" @click="wordDownLoad" />
            </el-col>
            <el-col :md="8" style="text-align: center;">
                <h2> 2022-1-12</h2>
            </el-col>
            <el-col :md="8" style="text-align: right;">
                <button-panel icon="ri-arrow-go-back-line" title="回到列表页" @click="$router.back()" />
            </el-col>
        </el-row>
        <div class="preview flex justify-center flex-direction">
            <h3>2019年跟踪</h3>
            <div ref="file" class="word" />
        </div>
        <div style="margin-top: 15px;">
            <el-card header="毕业跟踪" shadow="never">
                <el-row :gutter="20" type="flex" align="middle">
                    <el-col :md="8">
                        2019年跟踪
                    </el-col>
                    <el-col :md="8" style="text-align: center;">
                        2021-04-25
                    </el-col>
                    <el-col :md="8" style="text-align: right;">
                        <el-button type=" anger" size="mini" style="margin-right: 10px;" @click="wordDownLoad">
                            <i class="ri-file-download-line" />
                            下载
                        </el-button>
                        <el-button type="primary" size="mini">
                            <i class="ri-slideshow-4-line" />
                            预览
                        </el-button>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'
import ButtonPanel from '@/components/buttonPanel/buttonPanel'

const docx = require('docx-preview')
export default {
    name: 'WordPreview',
    components: {ButtonPanel, PageMain},
    props: {
        word: {
            type: null
        }
    },
    watch: {
        word: {
            handler(n) {
                if (n) {
                    this.setPreview(n)
                }
            },
            deep: true
        }
    },
    methods: {
        setPreview(file) {
            docx.renderAsync(file, this.$refs.file)
        },
        wordDownLoad() {
            const blob = new Blob([this.word])
            const a = document.createElement('a')
            a.href = URL.createObjectURL(blob)
            a.download = '1.docx'
            a.style.display = 'none'
            document.body.appendChild(a)
            a.click()
            a.remove()
        }
    }
}
</script>

<style scoped lang="scss">
.preview {
    margin-top: 10px;
    width: 100%;
    h3 {
        text-align: center;
    }
    .word {
        width: 100%;
        overflow-x: auto;
    }
}
</style>
